<html>

<body>

    <div id="parent-id">
        <p>hello world 1</p>
        <p class="test">hello world 2</p>
        <p>hello world 3</p>
        <p>hello world 4</p>
    </div>
    <div id="parent-id2">
        lala
        <p>wakao world 1</p>
        <p class="test2">wakao world 2</p>
        <div>
            <p>wakao world 3
            </p>
            <div>
                <p class="inner">inner wakao world5</p>
            </div>
        </div>
        <p>wakao world 4</p>
        <h1 id="test">Ice Cream Flavors</h1>
    </div>
    <div id="main-heading">
        main-heading
    </div>
    <div id="other-heading">
        other-heading
        <p id="quizzing-quizzes" style="color: orange;">Howdy</p>
        <h1 id='niuh1'>我是H1</h1>
        <h1>我是H1的兄弟</h1>
    </div>
    <script>
        var parentDOM = document.getElementById("parent-id");

        var test = parentDOM.getElementsByClassName("test"); // 匹配类名的元素集合，不是元素本身
        console.log(test); //HTMLCollection[1]

        var testTarget = parentDOM.getElementsByClassName("test")[0]; // 我们想要取到的第一个元素
        console.log(testTarget); //<p class="test">hello world 2</p>

        let parent1 = document.querySelector('#parent-id');
        console.log(parent1);

        let parent2 = document.querySelectorAll('#parent-id2 p'); // 包含所有子元素
        let parent3 = document.querySelectorAll('#parent-id2>p'); // 只包含直接子元素
        const allHeaders = document.querySelectorAll('div');
        for (let i = 0; i < allHeaders.length; i++) {
            console.dir(allHeaders[i]); // 可以显示一个对象所有的属性和方法
        }
        const myElement = document.querySelector('#test');
        myElement.textContent = 'The <strong>Greatest</strong> Ice Cream Flavors';

        const mainHeading = document.querySelector('#main-heading');
        const otherHeading = document.querySelector('#other-heading');
        const excitedText = document.createElement('span');
        // 方法 .appendChild() 会将元素从其当前位置移动到新的位置。
        // 因此只有otherHeading有三个感叹号。
        excitedText.textContent = '!!!';
        mainHeading.appendChild(excitedText);
        otherHeading.appendChild(excitedText);

        const htmlTextToAdd = '<h2>Skydiving is fun!</h2>';
        mainHeading.insertAdjacentHTML('beforebegin', htmlTextToAdd);
        document.querySelector('#quizzing-quizzes').style.cssText = 'width: 30px; text-decoration: underline';
        const mainHeading2 = document.querySelector('h1#niuh1');
        mainHeading2.nextElementSibling.setAttribute('id', 'niuh1-sibling');
        document.querySelector('#niuh1-sibling').style.backgroundColor = 'red';
    </script>
</body>

</html>